<template>
  <div class="classList">
    <el-container>
      <el-header>
        <div class="search">
          <div class="btnSearch">
            <el-button type="primary" icon="el-icon-search" @click="findKeyClass">搜索</el-button>
          </div>
          <el-input v-model="classInput" placeholder="请输入内容"></el-input>
        </div>
      </el-header>
      <el-main>
        <div class="menu">
          <el-card v-for="(items,index) in classList" :key="index"  class="mycard" :body-style="{padding: '0px',height:'100%'}">
            <img v-if="items.classImg" v-bind:src="items.classImg" class="image">
            <img v-else src="../../assets/img/main/class.png" class="image">
            <div class="text">
              <h3 class="className">
                <a v-bind:title="items.className" >课程名称：{{items.className}}</a>
              </h3>
              <h3 >
                <a v-bind:title="items.classTeacher" >任课教师：{{items.classTeacher}}</a>
              </h3>
              <div style="display: flex;width: 250px;margin: 3px auto auto;">
                <router-link :to="{ name: 'ClassVideo', query: { classId: items.classId }}">
                <el-button type="primary" class="card-btn" style="float: left">开始学习</el-button>
                </router-link>
                <el-button type="primary" class="card-btn" style="margin-left: 40px">详细信息</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-main>
      <el-footer>
        <div >
          <el-divider ></el-divider>
          <div style="height:0;display: flex; margin: auto">
            <el-pagination
                @current-change="(index)=> getClassListByIndex(this.classInput,index)"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="total"
                :current-page="index"
                style="margin: 0 auto"
            >
            </el-pagination>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "MyClass",
  data(){
    return{
      classInput:'',
      classList:[],
      index:1,
      total:1,
    }
  },
  methods:{
    getClassListByIndex(key,index){
      this.$axios.post(
          '/getClassList',
          {
            key:key,
            index:index,
            userId:this.Cookies.get("userId")
          }
      ).then(resp=>{
        this.classList=resp.data
      })
    },
    findKeyClass(){
      this.index=1
      this.getClassListByIndex(this.classInput,1)
      this.$axios.post(
          '/getClassNum',
          {key:this.classInput,
                userId:this.Cookies.get("userId"),
          }
      ).then(resp=>{this.total=resp.data})
    }
  },
  mounted() {
    this.getClassListByIndex(this.classInput,this.index)
    this.$axios.post(
        '/getClassNum',
        {key:this.classInput,
              userId:this.Cookies.get("userId"),}
    ).then(resp=>{this.total=resp.data})
  }
}

</script>

<style scoped>
.classList{
  background-color: white;
  width: 98%;
  margin: auto;
  display: block;
  height: 100%;

}

.search {
  height: 75px;
  background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
  margin-top: 5px;

}
.el-input {
  width: 200px;
  border: 1px solid #00aeff;
  border-radius: 12px;
  display: flex;
  margin: 12px;
  float: right;
}
.el-input__inner{
  border-radius: 12px;
}
.btnSearch{
  display: flex;
  float: right;
  margin: 12px;
}

.mycard
{
  height: 280px;
  width: 270px;
  margin: 0 8px 32px 8px;
  padding: 0!important;
  display: inline;
  float: left;

}

.menu{
  width: 94%;
  margin: 12px auto auto auto;
  display: inline-block;
  height: 85%;
}
.image{
  width: 100%;
  height: 170px;
  display: block;
}
.text{
  height: 110px;
  background:linear-gradient(45deg,#62bcec,#b1aadb, #5f86d7)
}

h3{
  display: flex;
  margin-left: 3px;
}
.className>a{
  font-size: 18px;
  color: #2b333b;
}
.card-btn{
  display: flex;
}
.el-divider--horizontal{
  margin: 5px auto;
  width: 95%
}
.el-pagination {
  height: 70%;
  display: flex;;
}
.el-pager{

}
.el-footer{
  position:absolute;
  bottom:0;
  width: 80%;
  height:100px;
}

</style>
